<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h2>当前n的值{{n}}</h2>
        <button @click="add">点击n+1</button>
        <button @click="bye">点击销毁vm</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.performance = false;
    const vm = new Vue({
        el:'#root',
        /* template: `
            <div>
                <h2>当前n的值{{n}}</h2>
                <button @click="add">点击n+1</button>
            </div>
        `, */
        data:{
            n:1,
        },
        methods:{
            add(){
                this.n++
            },
            bye(){
                console.log('destroy')
                // 销毁vm
                this.$destroy();
            }
        },
        watch:{
            n(){
                console.log('n变了')
            }
        },

        beforeCreate() {
            console.log(this.n)
            console.log(this)
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
            console.log(this.n)
            console.log(this)
        },
        beforeMount() {
            // 此时DOM操作 最终 都不生效，因为后面加载的都是之前生成的虚拟DOM
            console.log('beforeMount')
            //document.querySelector('h2').innerText= 'haha'
        },
        
        mounted() {
            // 此时都是经过DOM编译过的，此时可以操作，但是应该避免
            // 此时可以开启定时任务，绑定事件，消息订阅等
            console.log('mounted')
            //debugger;
            //document.querySelector('h2').innerText= 'haha'
        },
        // 数据是新的，页面是旧的
        beforeUpdate() {
            console.log('beforeUpdate')
            //debugger;
        },
         // 数据 和 页面 都是新的
        updated() {
            console.log('updated')
            //debugger;
        },
        // 此时数据还可以用
        // 一般关闭定时任务，绑定事件，消息订阅等
        beforeDestroy() {
            console.log('beforeDestroy')
            //this.add
        },

        destroyed() {
            console.log('destroyed')
        },
        
        
 
    })

</script>
</html>